<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>容易混淆几个知识点</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<h1>容易混淆几个知识点</h1>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
	// 1, \w 能否匹配中文  js中不能匹配中文 \w ==> [a-zA-z0-9_]
	// .net中可以匹配中文， 但不能匹配中文的标点符号
	var reg = /\w+/g
	var str = 'hel-lo 你好 word 世界！！?';
	// console.log(str.match(reg))  // 不能匹配中文
	
	
	// 2, \s能否匹配中文空格(全角空格)  可以匹配到全角空格
	var str = 'hel-lo 你　　好 wo　rd 世界！！?';
	var reg = /\s+/g
	// console.log(str.match(reg))
	
	
	// 3, 正则表达式或者 |, 比如: x|y
	//  /\d{5}-\d{4}|\d{5}/  ===> /(\d{5}-\d{4})|(\d{5})/  | 左右两边全部部分，而不是单个字符
	var reg = /\d{5}-\d{4}|\d{5}/
	var str = '03231'
	console.log(reg.exec(str))
	var str = '03231-3222'
	console.log(reg.exec(str))

	// 顺序调整一下
	var reg2 = /\d{5}|\d{5}-\d{4}/
	console.log(reg2.exec(str))  // 只会匹配 03231(\d{5}) 9位邮编的前5位
	// 原因： 匹配分枝条件时，将会从左到右地测试每个条件，如果满足了某个分枝的话，就不会去再管其它的条件了。
	// 所以要将更难得条件放在最左边  /\d{5}-\d{4}|\d{5}/
	
	

	// 4, 未匹配到的分组是否也占位  
	var str = "http://www.runoob.com:80/html/html-tutorial.html?id=3&age=22#good";
	// url: protocol :// hostname[:port] / path / [;parameters][?query]#fragment
	//        \1(协议)   \2(域名) \3(端口) \4(路径/参数)
	var reg = /(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/;
	// console.log(str.match(reg))
	// console.log(reg.exec(str))
	
	// 端口未匹配到，仍然占位， 对应组的value = undefined 
	str = "http://www.runoob.com/html/html-tutorial.html?id=3&age=22#good";
	// console.log(str.match(reg))
	

	</script>
</body>
</html>